<template>
  <div>
    <div class="parents_box" ref="scrollBox" @scroll="handleScroll" :style="{marginLeft:marginLeft?0:''}">
      <div
        class="rmwj_box"
        v-for="(item, index) in RilistProps"
        :key="index"
        :ref="'card_' + index"
        :style="{
          backgroundImage:
            index == 0
              ? `url(${require('@/assets/images/xgwt_logo.png')})`
              : index == 1
              ? `url(${require('@/assets/images/xuangu_box.png')})`
              : index == 2
              ? `url(${require('@/assets/images/zg_box.png')})`
              : index == 3
              ? `url(${require('@/assets/images/jj_box.png')})`
              : index == 4
              ? `url(${require('@/assets/images/zx_box.png')})`
              : 'none',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
        }"
      >
        <div class="rmtj_top">
          <img
            class="top_left"
            :src="
              index == 0
                ? require('@/assets/images/cjwt_two.png.png')
                : index == 1
                ? require('@/assets/images/xuangu_icon.png')
                : index == 2
                ? require('@/assets/images/zg_icon.png')
                : index == 3
                ? require('@/assets/images/jj_icon.png')
                : index == 4
                ? require('@/assets/images/zx_icon.png')
                : ''
            "
          />
          <div class="top_text">{{ item.title }}</div>
          <div class="top_right" @click="changeContent(index)">
            <img class="top_right_img" src="@/assets/images/hyh_logo.png" />
            <div class="top_right_text">换一换</div>
          </div>
        </div>

        <div
          class="rmtj_content"
          v-for="(itemcontent, idx) in getVisibleContent(item)"
          :key="idx"
        >
          <div class="rmtj_list" @click="someMethod(itemcontent)">
            <div class="rmtj_list_text">{{ itemcontent }}</div>
            <img
              src="@/assets/images/cjwt_right.png"
              alt=""
              class="rmtj_list_imgs"
            />
          </div>
        </div>
      </div>
    </div>
    <div style="padding: 0 0px;">

    <van-tabs
      style="background-color: rgba(0, 0, 0, 0)"
      v-model="RilistIndex"
      @click="scrollToCard(RilistIndex)"
    >
      <van-tab v-for="itemTitle in RilistProps" :title="itemTitle.title">
      </van-tab>
    </van-tabs>
  </div>

  </div>
</template>
  
  <script>
import {} from "@/utils/common";
import { Toast } from "vant";
import commonFunc from "@/utils/ysjh";
export default {
  data() {
    return {
      currentCardIndex: 0,
      RilistIndex: 0,
      pageSize: 4,
    };
  },
  props: {
    RilistProps: {
      type: Array,
      default: () => [],
    },
    
    marginLeft: {
      type: [Boolean],
      default: false,
    },
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    someMethod(e) {
      this.$parent.someMethod(e);
    },
    changeContent(index) {
      const item = this.RilistProps[index];
      const totalPage = Math.ceil(item.content.length / this.pageSize);

      item.contentIndex = (item.contentIndex + 1) % totalPage;
      // Vue 2 响应式需要 set
      this.$set(this.RilistProps, index, { ...item });
    },
    scrollToCard(index) {
      console.log(index);
      this.$nextTick(() => {
        const targetCard = this.$refs["card_" + this.RilistIndex];
        const scrollBox = this.$refs.scrollBox;

        if (targetCard && scrollBox) {
          const cardEl = Array.isArray(targetCard) ? targetCard[0] : targetCard; // Vue 2 中 ref 可能是数组
          const scrollLeft = cardEl.offsetLeft - scrollBox.offsetLeft;

          scrollBox.scrollTo({
            left: scrollLeft,
            behavior: "smooth",
          });
        }
      });
    },
    handleScroll() {
      const container = this.$refs.scrollBox;
      const cards = container.querySelectorAll(".rmwj_box");
      let minDiff = Infinity;
      let currentIndex = 0;

      cards.forEach((card, index) => {
        const rect = card.getBoundingClientRect();
        const diff = Math.abs(
          rect.left - container.getBoundingClientRect().left
        );
        if (diff < minDiff) {
          minDiff = diff;
          currentIndex = index;
        }
      });

      this.currentCardIndex = currentIndex; // 保存当前卡片索引
      this.RilistIndex = currentIndex;
      console.log("当前展示卡片索引:", currentIndex);
    },
    getVisibleContent(item) {
      const start = item.contentIndex * this.pageSize;
      const end = start + this.pageSize;
      return item.content.slice(start, end);
    },
    submit() {
      this.showMore = false;
    },
    //转客服
    kefu() {
      console.log(this.question, "question");
      commonFunc.openService("", "", "KDS_ZXKF", {
        client_question: this.question,
        isChat: true,
      });
    },

    isUseFun(clickType, index) {
      if (clickType === "click_noUse") {
        this.showMore = true;
      }

      console.log(clickType, "clickType");
      if (clickType == "click_use") {
        return (this.isShowUse = this.$parent.$parent.isUseFun(clickType, ""));
      }
      if (clickType == "click_noUse") {
        return (this.isShowNoUse = this.$parent.$parent.isUseFun(
          clickType,
          ""
        ));
      }
      this.$emit("isUseFun", clickType, index);
    },
    // 收藏接口
    collectFun() {
      const type = this.isflagCollectIs ? "collect" : "noCollect";
      // console.log(this.isflagCollect, "isflagCollect");
      this.$parent.$parent.collectionFun(type, this.question);
    },
  },
};
</script>
  
 <style lang="less" scoped>
.parents_box {
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  padding-left: 20px;
  padding: 10px;
  scroll-snap-type: x mandatory;
  /* 可选，让滚动卡片更丝滑 */
  -webkit-overflow-scrolling: touch;
}

.rmwj_box {
  flex: 0 0 auto;
  /* 不换行、不会自动缩放 */
  width: 80vw;
  /* 每张卡片占 80% 屏幕宽度 */
  margin-right: 16px;
  background: #fff;
  padding-left: 10px;

  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  scroll-snap-align: start;
  /* 可选，配合 snap-type */
}

.rmwj_box:first-child {
  margin-left: 15px !important;
}

/* 你原本的结构样式不需要动太多，可以继续使用 */
.rmtj_top {
  display: flex;
  align-items: center;
  padding: 10px;
}

.rmtj_content {
  padding: 0 10px 10px 0px;
}

.rmtj_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  background: #f6f6f6;
  padding: 6px 10px;
  border-radius: 6px;
}

.parents_box::-webkit-scrollbar {
  display: none;
}
.van-tabs {
  background: transparent;
}
::v-deep .van-tabs__nav {
  background: transparent !important;
}
::v-deep .van-tabs__line {
  background-color: transparent;
}
</style>
  